<template>
	<view>
		<u-navbar title-color="#fff" back-icon-color="#ffffff" :is-fixed="true"
			:background="background" back-text="返回"
			:back-text-style="{color: '#fff'}" back-icon-name="nav-back" :title="title" />
		<view>
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType" label-width="100px">
				<u-form-item :label-position="labelPosition" label="订单编号">
					<u-input :border="border" disabled v-model="model.orderCode" type="text"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="申诉原因" prop="handleReason">
					<u-input :border="border" placeholder="请输入申诉原因" v-model="model.handleReason" type="text"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="申诉图片">
					<u-upload width="160" height="160"
						:before-remove="beforeRemove"
						ref="uUpload"
						:custom-btn="false" 
						:show-upload-list="true" 
						:action="uploadFile.url" 
						:formData="uploadFile.formData" 
						:auto-upload="true" 
						:file-list="fileList"
						:show-progress="true"
						:deletable="true"
						:max-count="uploadFile.maxCount"
						@on-list-change="onListChange"
						@on-success="OnSuccess"
						/>
				</u-form-item>
			</u-form>
			<u-button @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	import { 
		policy 
	} from '../../api/uploadFile/upload.js'
	import {
		applyHandle
	} from '../../api/driver/handel.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				title: '同城物流',
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				model: {
					orderCode: '',
					userId: '',
					handleImg: '',
					handleReason: ''
				},
				uploadFile: {
					url: '',//后端地址
					maxCount: 1, // 最大上传数
					formData: {} ,// 携带的参数
					name: '' // 上传的文件字段名
				},
				labelPosition: 'left',
				border: false,
				errorType: ['message'],
				fileList: [],
				lists: [], // 组件内部的文件列表,
				rules: {
					handleReason: [
						{
							required: true,
							message: '请填写申诉原因'
						},
						{
							min: 5,
							message: '申诉原因不能少于5个字',
							trigger: 'change' ,
						},
						// 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文
						{
							pattern: /^[\u4e00-\u9fa5]+$/gi,
							message: '申诉原因只能为中文',
							trigger: 'change',
						},
					]
				}
			}
		},
		computed: {
			...mapGetters([
				'userID',
				'name',
				'idNumber',
			])
		},
		methods: {
			// 上传图片之前的钩子函数
			beforeUpload() {
			},
			// 上传成功时返回
			OnSuccess(){
				this.model.handleImg = this.uploadFile.formData.host + "/" + this.uploadFile.formData.key
				console.log(this.model.handleImg)
				console.log(this.uploadFile.formData.host + "/" + this.uploadFile.formData.key)
			},
			getPolicy() {
				let _self = this;
				policy().then(response => {
					_self.uploadFile.url = response.host
					_self.uploadFile.formData.policy = response.policy;
					_self.uploadFile.formData.signature = response.signature;
					_self.uploadFile.formData.ossaccessKeyId = response.accessid;
					_self.uploadFile.formData.key = response.dir + response.key;
					_self.uploadFile.formData.dir = response.dir;
					_self.uploadFile.formData.host = response.host;
				})
			},
			onListChange(lists) {
				// console.log('onListChange', lists);
				this.lists = lists;
			},
			beforeRemove(index, lists) {
				return true;
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						applyHandle({apply: JSON.stringify(this.model)})
						.then(res => {
							if (res.header.code == 200) {
								uni.showToast({
								    title: '申诉成功',
								    duration: 2000
								});
								uni.navigateTo({
									url: `./handleList/handleList`,
									animationType: 'pop-in',
									animationDuration: 200
								});
							}
						})
					}
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		created() {
			this.model.userId = this.userID
			this.getPolicy()
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.model.orderCode = option.orderCode //打印出上个页面传递的参数。
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f5f5f5;
		width: 100%;
		height: 100%;
		padding: 0 20rpx;
	}
</style>
